

initEditor()

// 页面处理，获取分类
axios.get('/my/category/list').then(res=>{
    let {status,data} = res.data
    if(status ===0 ){
        let str = ''

        data.forEach(item => {
            str+=`
            <option value="${item.id}">${item.name}</option>
            `
        });
        $('select[name=cate_id]').append(str)

        let form = layui.form
        form.render('select')
    }
})


//封面处理 
// -------------------------- 处理封面图片 -----------------
// 1. 初始化剪裁框
// 1.1) 初始化图片裁剪器
var $image = $('#image')
// 1.2) 裁剪选项
var options = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}
// 1.3) 初始化裁剪区域
$image.cropper(options);


// 2. 点击 “选择封面” 能够选择图片
$('button:contains("选择封面")').click(function () {
  $('#file').trigger('click');
});

// 3. 图片切换的时候，更换剪裁区的图片
$('#file').change(function () {
  if (this.files.length > 0) {
    // 3.1) 找到文件对象
    var fileObj = this.files[0];
    // 3.2) 创建url
    var url = URL.createObjectURL(fileObj);
    // 3.3) 更换图片
    $image.cropper('replace', url);
  }
});


// -----------------添加文章----------
$('form').on('submit',function(e){
    e.preventDefault()
    let fd = new FormData(this)
    // 修改content
    fd.set('content',tinyMCE.activeEditor.getContent())
    // 对于图片来说 需要裁剪，裁剪之后转换成文件对象格式，追加到Fd中
    let canvas = $image.cropper('getCroppedCanvas',{width:400,height:280})
    // canvas.toDataURL()
    // 把canvas转换成文件对象格式
    canvas.toBlob(function(blob){
        fd.append('cover_img',blob);//blod对象 追加到fd中就会转成文件对象
        // 检测fd中有哪些数据
        // fd.forEach((item,index)=>console.log(index,item))
        // ajax提交
        axios.post('/my/article/add',fd).then(res=>{
            let {status,message} = res.data
            if(status===0){
                layer.msg(message)
            }
        })
    })
})
